<template>
	<view class="footer">
		<!-- F1: 底部的导航菜单 -->
		<view class="f1">
			<navigator url="/pages/userCenter/userCenter" open-type="switchTab">登录</navigator>
			<text>|</text>
			<navigator url="/pages/userCenter/userCenter" open-type="switchTab">注册</navigator>
			<text>|</text>
			<navigator url="/pages/chatroom/chatroom" open-type="navigate">在线客服</navigator>
			<text>|</text>
			<text @click="go">返回顶部</text>
		</view>
		<!-- F2: 四宫格菜单 -->
		<view class="f2">
			<view class="col">
				<image class="icon" mode="widthFix" src="../../static/img/icon1.png"/>
				<text>品质保障</text>
			</view>
			<view class="col">
				<image class="icon" mode="widthFix" src="../../static/img/icon2.png"/>
				<text>私人订制</text>
			</view>
			<view class="col">
				<image class="icon" mode="widthFix" src="../../static/img/icon3.png"/>
				<text>学员特供</text>
			</view>
			<view class="col">
				<image class="icon" mode="widthFix" src="../../static/img/icon4.png"/>
				<text>个人专属</text>
			</view>
		</view>
		<!-- F3: 版权声明 -->
		<view class="f3">
			<text>版权所有 © 达内科技 2022</text>	
		</view>
	</view>
</template>

<script>
	export default {
		methods: {
			go(){
				//返回页面顶部
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 200,
				})
			}
		}
	}
</script>

<style lang="scss">
.footer {
	margin: $uni-spacing-col-base  0;
	border-top: $uni-border-width $uni-border-style $uni-border-color;
	border-bottom: $uni-border-width $uni-border-style $uni-border-color;
	box-shadow: 0 0  $uni-shadow-radius-sm  $uni-border-color;
	.f1 {
		padding: $uni-spacing-col-base;
		//弹性容器的主轴方向：横向
		flex-direction: row;
		//子元素在主轴方向上：空白均匀分布	
		justify-content: space-evenly;
	}
	.f2 {
		//主轴方向：横向
		flex-direction: row;
		border-top: $uni-border-width $uni-border-style $uni-border-color;
		border-bottom: $uni-border-width $uni-border-style $uni-border-color;
		padding: $uni-spacing-col-base 0; 
		.col {
			//尺寸增长的权重： 1
			flex: 1;
			//当前元素也是弹性容器，主轴为纵向，子元素在交叉轴上水平居中
			align-items: center;
			.icon {
				width: 40%;
			}
		}
	}
	.f3 {
		//在交叉轴上，弹性容器内的子元素居中对齐
		align-items: center;
		padding: $uni-spacing-col-base 0;
	}
}
</style>